Xiuno BBS 开发实践教程 - 主题 - The Easy Way
<，因为菜鸟教程写的更加全面和系统化，有助于切实提升你的技能水平。看完后可以回到本文继续阅读“实践”部分。
但如果你懒得动，则可以继续看本文，因为我帮你总结了CSS里的核心概念（因为我就是这么爱你呀）。
#### 1. 选择器
选择器用于指定CSS样式应用的目标HTML元素。通过不同的选择器，您可以精准地定位到网页中的特定元素或元素组。
- **元素选择器**：基于HTML标签名，如`p`选择所有段落元素。
- **类选择器**：基于HTML元素的`class`属性，如`.classname`选择所有具有该类的元素。
- **ID选择器**：基于HTML元素的`id`属性，如`#idname`选择具有特定ID的唯一元素。
- **属性选择器**：根据元素的属性及其值进行选择，如`[type="text"]`选择所有类型为文本的输入框。
- **伪类和伪元素**：用于选择元素的特定状态或部分，如`:hover`选择鼠标悬停时的元素，`::before`在元素内容前插入内容。
#### 2. 属性和值
属性定义了要应用的具体样式特性，值则是属性的具体设置。
**示例**
- `color: red;` 中，`color`是属性，`red`是值。
- `background-color: #f7f7f7;` 中，`background-color`是属性，`#f7f7f7`是值。
#### 3. 样式规则
样式规则由选择器和声明块组成，声明块包含一个或多个属性及其值的组合。
**示例**
```css
p {
color: blue;
font-size: 16px;
}
```
这条规则将所有段落文本的颜色设置为蓝色，字体大小设置为16像素。
#### 4. 层叠和优先级（Cascading and Specificity）
CSS的“层叠”特性决定了当多个样式规则应用于同一元素时，哪个规则优先生效。优先级由选择器的特异性（specificity）、来源（source order）和重要性（`!important`）决定。
- **特异性**：内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素。
- **来源**：浏览器默认样式 < 用户样式 < 作者样式。
- **重要性**：使用`!important`可以提高样式的优先级，但不建议频繁使用。
#### 5. 盒模型
每个HTML元素都被视为一个矩形盒子，包含内容区、内边距（padding）、边框（border）和外边距（margin）。盒模型决定了元素在页面上的布局和间距。
- **示例**：
```css
.box {
width: 200px;
padding: 10px;
border: 2px solid #000;
margin: 15px;
}
```
这个盒子的总宽度为`200px + 2*10px + 2*2px + 2*15px = 274px`。
#### 6. 布局（Layout）
CSS提供了多种布局方式，包括浮动（float）、定位（position）、Flexbox和Grid布局。这些布局方法帮助您控制元素在页面上的排列和对齐方式。
- **Flexbox**：适用于一维布局，方便对齐和分配空间。
- **Grid**：适用于二维布局，能够同时处理行和列。
#### 7. 响应式设计（Responsive Design）
响应式设计确保网站在不同设备和屏幕尺寸下都能良好显示。通过媒体查询（media queries）、百分比单位和弹性单位（如`em`、`rem`），您可以创建适应各种屏幕的布局。
- **示例**：
```css
@media (max-width: 600px) {
.container {
width: 100%;
}
}
```
#### 8. 变量（Variables）
CSS变量允许您定义可重用的值，便于维护和统一管理样式。
- **示例**：
```css
:root {
--primary-color: #31C177;
}
.button {
background-color: var(--primary-color);
}
```
#### 总结
掌握以上CSS核心概念后，您将具备构建和自定义网页外观的基础知识。接下来，您可以将这些理论知识应用于实际的CSS代码中，通过实践进一步巩固和提升您的CSS技能。
现在，让我们将所学的知识应用到Xiuno BBS网站的自定义中，通过编写和调整CSS代码，实现您理想中的网站外观。
## 实践
现在我们已经了解了CSS的核心概念，接下来我们将把这些概念应用到实际的CSS代码中，创建一个美观的Xiuno BBS主题。
### 目录结构
```
- my_theme_custom/
- conf.json
- hook/
- header_bootstrap_bbs_after.htm
- view/
- css/
- custom.css
```
按照以上目录层次在xiuno bbs的plugin文件夹依次创建文件夹和文件，然后继续阅读。
### conf.json
```json
{
"name": "我的第一个主题",
"brief": "教学用主题",
"version": "1.0.0",
"bbs_version": "4.0.4",
"installed": 0,
"enable": 0,
"hooks_rank": [],
"overwrites_rank": [],
"dependencies": []
}
```
### header_bootstrap_bbs_after.htm
```html
<link rel="stylesheet" href="plugin/my_theme_custom/view/css/custom.css">
```
### custom.css
#### 定义变量
先定义一些全局变量，方便后面重复使用这些颜色和值。
```css
/* 【定义变量】 */
:root {
--primary: #31C177; /* 主色调 */
--primary-hover: #33CC7D; /* 主色调悬停状态 */
--primary-focus: #2DB36D; /* 主色调聚焦状态 */
--dark: #1a1d20; /* 深色，用于文字 */
--light: #f7f7f7; /* 浅色，用于背景 */
--white: #fff; /* 白色，其实 Bootstrap 4 已经定义了，但这里再明确一下 */
}
```
#### 全局样式
给整个页面设置一些基础样式，比如字体、颜色、盒模型等。
```css
/* 【全局】 */
*,
*:after,
*:before {
/* 所有元素都用 border-box，方便计算宽高 */
box-sizing: border-box;
}
body {
font-size: 1rem;
font-family: "思源黑体", "思源黑体 CN","Source Han Sans","Source Han Sans CN","Noto Sans CJK","Noto Sans CJK SC","Microsoft YaHei", "PingFang SC", sans-serif;
-webkit-font-smoothing: antialiased; /* 让字体更平滑 */
color: var(--dark); /* 文字用深色 */
background-color: var(--light); /* 背景用浅色 */
font-weight: 400;
}
/* 链接样式 */
a {
color: var(--dark); /* 链接默认颜色 */
text-decoration: none; /* 去掉下划线 */
transition: .2s; /* 加点过渡效果 */
}
a:hover {
color: var(--primary); /* 鼠标悬停时变成主色调 */
text-decoration: none;
}
/* 标题样式 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: var(--dark); /* 标题也用深色 */
}
```
#### 容器样式
容器的样式主要是为了布局，保持内容居中并留出间距。
```css
/* 【容器】 */
.container {
width: 100%;
padding-right: 1.42rem;
padding-left: 1.42rem;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
flex-wrap: wrap; /* 允许换行 */
margin-right: -1.42rem; /* 抵消 padding */
margin-left: -1.42rem;
}
/* 所有列的共同样式 */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col, .col-auto,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-sm, .col-sm-auto,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-md, .col-md-auto,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-lg, .col-lg-auto,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xl, .col-xl-auto {
position: relative;
width: 100%;
min-height: 0.07rem;
padding-right: 1.42rem;
padding-left: 1.42rem;
}
```
#### 卡片样式
卡片是常见的UI组件，这里给它加点样式，让它看起来更现代。
```css
/* 【卡片】 */
.card {
background: var(--white); /* 白色背景 */
border: none; /* 去掉边框 */
box-shadow: 0 0.07rem 0.14rem 0 rgba(0, 0, 0, .04); /* 加点阴影 */
}
.card > .card-header {
color: var(--dark); /* 深色文字 */
font-size: 1rem;
border-bottom: 0.07rem solid var(--light); /* 底部加条浅色线 */
background: var(--white); /* 白色背景 */
}
.card-header-tabs > .nav-item > .nav-link {
padding: 0 0.71rem 0.71rem 0.71rem; /* 调整内边距 */
}
.card-header-tabs > .nav-item > .nav-link.active {
background: var(--white); /* 激活状态背景 */
border-color: var(--white); /* 边框颜色 */
border-bottom-color: var(--primary); /* 底部边框用主色调 */
color: var(--primary); /* 文字用主色调 */
}
.card-body {
padding: 1.42rem; /* 内边距 */
}
.thread,
.post {
padding: 0rem 0 1.42rem;
border-color: var(--light); /* 浅色边框 */
margin-bottom: 0.71rem;
}
.card-footer {
padding: 0.75rem 1.25rem;
background-color: var(--white); /* 白色背景 */
border-top: 0.07rem solid var(--light); /* 顶部加条浅色线 */
}
```
#### 页眉样式
导航栏是页面的重要部分，这里给它加点样式，让它更醒目。
```css
/* 【页眉】 */
.logo-2 {
width: auto;
height: 1.71rem;
}
.bg-dark {
background: var(--white) !important; /* 覆盖 Bootstrap 的深色背景 */
box-shadow: 0 0.07rem 0.14rem rgba(0, 0, 0, .04); /* 加点阴影 */
}
.navbar-dark .navbar-brand {
color: var(--dark); /* 深色文字 */
}
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-left: 0.71rem;
padding-right: 0.71rem;
}
.navbar-dark .navbar-nav .nav-link {
color: var(--dark); /* 深色文字 */
}
.card-header-tabs > .nav-item > .nav-link:hover:not(.active) {
border: 1px solid rgba(255, 255, 255, 0);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: var(--primary); /* 悬停时用主色调 */
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
color: var(--primary) !important; /* 激活状态用主色调 */
}
```
#### 按钮样式
按钮是用户交互的核心，这里给它加点样式，让它更吸引人。
```css
/* 【按钮】 */
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.21rem;
transition: all 0.15s ease-in-out; /* 加点过渡效果 */
}
.btn:hover {
transform: translateY(-0.07rem); /* 悬停时往上移一点 */
box-shadow: 0 0.28rem 0.56rem rgba(0, 0, 0, .08); /* 加点阴影 */
}
.btn-primary {
color: var(--white); /* 白色文字 */
background-color: var(--primary); /* 主色调背景 */
border-color: var(--primary); /* 主色调边框 */
}
.btn-primary:hover {
color: var(--white); /* 悬停时保持白色文字 */
background-color: var(--primary-hover); /* 悬停时用主色调的悬停状态 */
border-color: var(--primary-hover); /* 边框也用悬停状态 */
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: var(--white); /* 激活状态保持白色文字 */
background-color: var(--primary-focus); /* 激活状态用主色调的聚焦状态 */
border-color: var(--primary-focus); /* 边框也用聚焦状态 */
}
.list-group-item.active {
z-index: 2;
color: var(--white); /* 激活状态用白色文字 */
background-color: var(--primary-hover); /* 背景用主色调的悬停状态 */
border-color: var(--primary-hover); /* 边框也用悬停状态 */
}
.aside .btn {
padding: 0.71rem; /* 侧边栏按钮的内边距 */
}
```
#### 杂项样式
最后，处理一些小细节，比如面包屑导航和头像。
```css
/* 【杂项】 */
.breadcrumb {
background: var(--white) !important; /* 白色背景 */
border: none; /* 去掉边框 */
box-shadow: 0 0.07rem 0.14rem 0 rgba(0, 0, 0, .04); /* 加点阴影 */
}
.avatar-3 {
border-radius: 0.21rem; /* 头像加个圆角 */
}
```
#### 响应式适配
为了让页面在不同设备上都能正常显示，这里加点响应式样式。
```css
/* 【响应式适配】 */
@media (min-width: 576px) {
#body {
padding-top: 1.42rem; /* 桌面端顶部间距 */
}
}
@media (max-width: 576px) {
#body {
padding-top: 0.71rem; /* 移动端顶部间距 */
}
#body > .container > .row > div {
padding: 0; /* 移动端去掉内边距 */
}
}
@media (min-width: 1200px) {
.container {
max-width: 68.5rem; /* 大屏幕上限制容器宽度 */
}
}
```
## 启用新主题
经过上述步骤后，您的Xiuno BBS站点将具有以下变化：
- 页眉导航栏背景变为白色，文字颜色为深灰色，悬停和聚焦时链接颜色变为绿色。
- 主要按钮背景颜色为绿色，鼠标悬停时颜色加浅，激活时颜色更深。
- 激活或选中的标签文字颜色与底部边框颜色变为绿色。
这些简单的改动可以让您的站点看起来更加现代化和吸引人。
## 结束语
通过本教程，您学习了如何使用CSS的核心概念来创建美观的Xiuno BBS主题。虽然这只是入门级别的定制，但着实展示了如何利用自定义CSS来快速提升站点的视觉效果。
随着您对Xiuno BBS和Bootstrap 4的熟悉程度增加，您可以进一步探索更多高级定制选项，以满足您的具体需求。敬请期待未来的《Xiuno BBS 开发实践教程 - 主题 - The Hard Way》。]]>